import { useEffect, useState } from 'react'
import { useNavigate } from "react-router-dom"
import { Form, Input, Button } from 'antd'
import { getCaptcha, login, setSession } from '@apis/loginApi'

import {
  loginLogo,
  loginMainImage,
  loginIconUsername,
  loginIconPassword,
} from './images'

import styles from './styles/login.module.css'

const ENV_NAME = process.env.REACT_APP_NAME

const Login = () => {

  // state
  const [loading, setLoading] = useState(false)
  const [captcha, setCaptcha] = useState({})
  const naviate = useNavigate()

  async function getCaptchaFun(params) {
    const { data, error} = await getCaptcha()
    if (error) return
    setCaptcha(data)
  }

  useEffect(()=>{
    console.log(process.env);
    getCaptchaFun()
  },[])

  // event handler
  const onFinish = async (values) => {
    console.log('on finish with value:', values)
    const respCaptchaImgDTO = {...captcha}
    const params = {...values, respCaptchaImgDTO}

    setLoading(true)
    const { data, error} = await login(params)
    setLoading(false)
    if (error) return

    setSession(data)
    naviate('/')
  }

  const initialValues = {
    // userCode: 'test',
    // password: 'test@Risk#689',
  }

  const resetPassword = () => {
  }

  return (
    <div className={styles.page}>
      <div>
        <img className={styles.logo} src={loginLogo} alt="logo" />
      </div>
      <div className={styles.body}>
        <div className={styles.image_container}>
          <img className={styles.image} src={loginMainImage} alt="main" />
        </div>
        <div className={styles.login_panel_container}>
          <div className={styles.login_panel}>
            <div className={styles.login_panel_title}>风险地图系统({ENV_NAME})</div>
            <Form
              name="loginForm"
              className={styles.login_form}
              layout="vertical"
              onFinish={onFinish}
              initialValues={initialValues}
              autoComplete="off"
            >
              <Form.Item
                name="userCode"
                rules={[{ required: true, message: '请输入正确的用户名' }]}
              >
                <Input
                  placeholder="请输入用户名"
                  allowClear
                  prefix={<img className={styles.input_icon} src={loginIconUsername} alt="" />}
                />
              </Form.Item>
              <Form.Item name="password" rules={[{ required: true, message: '请输入正确的密码' }]}>
                <Input.Password
                  placeholder="请输入密码"
                  prefix={<img className={styles.input_icon} src={loginIconPassword} alt="" />}
                />
              </Form.Item>
              <Form.Item name="captchaVerification" rules={[{ required: true, message: '请输入验证码' }]}>
                <div className={styles.auth_code}>
                  <Input placeholder="请输入验证码" />
                  <img src={`data:image/bmp;base64,${captcha?.img}`} alt="" onClick={getCaptchaFun}/>
                </div>
              </Form.Item>
              <Form.Item>
                <Button
                  className={styles.form_button}
                  type="primary"
                  size="large"
                  htmlType="submit"
                  loading={loading}
                >
                  登 录
                </Button>
              </Form.Item>
            </Form>
            {/* <div onClick={resetPassword} style={{
              color: '#6e99FF',
              cursor: 'pointer',
            }}>
              重置密码
            </div> */}
          </div>
        </div>
      </div>
      <div className={styles.footer}>
        <span className={styles.copyright}>版权所有©️众诚汽车保险股份有限公司</span>
      </div>
    </div>
  )
}

export default Login